import React, { Component } from 'react';
import { connect } from 'react-redux';
import { messages } from "share/common";
import { Form, Button, message, Spin } from 'antd';
import 'styles/setting/department-group/department-group-detail.scss';
import deptGroupService from 'containers/setting/department-group/dept-group.service';
import DepartmentGroupDetailHead from './department-group-detail-head'
import DepartmentGroupDetailList from './department-group-detail-list'

class DepartmentGroupDetail extends Component {

  state = {
    head: {
      name: '',
      i18n: {
        name: []
      }
    },
    loading: false,
    saving: false,
    needRefresh: false
  };

  componentDidMount() {
    const { id } = this.props;
    if(id) {
      this.getHead(id);
    }
  }

  getHead = id => {
    this.setState({ loading: true });
    deptGroupService.getDeptGroupById(id)
      .then(res => {
        const head = res.data;
        //这里的loading如果放到finally后面则不会让表单正确设置值
        //因为我下面是按照loading控制显示隐藏的
        this.setState({ head, loading: false }, () => {
          const { setFieldsValue } = this.props.form;
          let values = this.pick(head, ['enabled', 'deptGroupCode']);
          values.nameI18n = {
            name: head.name,
            i18n: head.i18n.name
          };
          setFieldsValue(values);
        });
      })
  };

  handleSave = e => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if(!err){
        const { head } = this.state;
        let params = Object.assign({}, head, values);
        params.name = values.nameI18n.name;
        params.i18n.name = values.nameI18n.i18n;
        delete params.nameI18n;
        delete params.includeSubDepartment;
        this.setState({ saving: true });
        deptGroupService.addOrUpdateDeptGroup(params)
          .then(res => {
            message.success(messages('common.operate.success')/*操作成功*/);
            this.setState({ head: res.data, needRefresh: true });
          })
          .finally(() => {
            this.setState({ saving: false });
            if(this.props.id || (!this.props.id && head.id)){
              this.props.close();
            }
          })
      }
    })
  };

  handleBack = () => {
    this.props.close();
  };

  render() {
    const { form } = this.props;
    const { saving, loading, head } = this.state;
    return (
      <div className='department-group-detail'>
        <Form onSubmit={this.handleSave} className='new-form'>
          {loading ? <Spin /> : (
            <div>
              <DepartmentGroupDetailHead form={form} head={head}/>
              {head.id && <DepartmentGroupDetailList id={head.id} disabled={this.props.params.disabled} head={head}/>}
              <div className='slide-footer'>
                <Button
                  type='primary'
                  htmlType='submit'
                  loading={saving}
                  disabled={this.props.params.disabled}
                >
                  {messages('common.ok')/*确定*/}
                </Button>
                <Button onClick={this.handleBack}>{messages('common.cancel')/*取消*/}</Button>
              </div>
            </div>
          )}
        </Form>
      </div>
    )
  }
}
  function mapStateToProps(state) {
  return {}
}

const WrappedDepartmentGroupDetail = connect(mapStateToProps)(Form.create()(DepartmentGroupDetail));

WrappedDepartmentGroupDetail.afterCloseParams = context => {
  const { needRefresh } = context.state;
  return needRefresh;
};

export default WrappedDepartmentGroupDetail;

